<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <!--====== Required meta tags ======-->
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--====== Title ======-->
        <title>名人堂</title>
        <!--====== Favicon Icon ======-->
        <script th:src="@{https://cdn.jsdelivr.net/npm/vue/dist/vue.js}"></script>
        <script th:src="@{https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js}"></script>
        <link rel="stylesheet" th:href="@{/css/search.css}">
        <!--====== Flaticon css ======-->
        <link rel="stylesheet" th:href="@{/css/flaticon.css}">
        <!--====== FontAwesome css ======-->
        <link rel="stylesheet" th:href="@{/css/all.min.css}">
        <!--====== Bootstrap css ======-->
        <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
        <!--====== magnific-popup css ======-->
        <link rel="stylesheet" th:href="@{/css/magnific-popup.css}">
        <!--====== Slick-popup css ======-->
        <link rel="stylesheet" th:href="@{/css/slick.css}">
        <!--====== Jquery UI css ======-->
        <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}">
        <!--====== Nice Select css ======-->
        <link rel="stylesheet" th:href="@{/css/nice-select.css}">
        <!--====== Animate css ======-->
        <link rel="stylesheet" th:href="@{/css/animate.css}">
        <!--====== Default css ======-->
        <link rel="stylesheet" th:href="@{/css/default.css}">
        <!--====== Style css ======-->
        <link rel="stylesheet" th:href="@{/css/style.css}">
        <!--====== Index css ======-->
        <link rel="stylesheet" th:href="@{/css/index.css}">
    </head>
    <body>
        <!--====== Start Preloader ======-->
        <div class="preloader">
            <div class="loader">
                <div class="pre-shadow"></div>
                <div class="pre-box"></div>
            </div>
        </div><!--====== End Preloader ======-->
        <!--====== Search From ======-->
        <div class="modal fade search-modal" id="search-modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 800px;max-width: 90%">
                <div class="modal-content">
                    <!--前台白底显示-->
                    <div id="app">
                        <div class="search-wrapper" style="border-radius:4px">
                            <div class="mb-3">
                                <span class="search-title">本地搜索</span>
                                <span class="float-right" @click="searchFlag = false">
<!--            <i class="material-icons">close</i>-->
          </span>
                            </div>
                            <div class="search-input-wrapper">
                                <!--                                <i class="material-icons">search</i>-->
                                <input v-model="keywords" placeholder="输入文章标题或内容..." style="border:none"/>
                            </div>
                            <div class="search-result-wrapper">
                                <hr class="divider" />
                                <ul>
                                    <li class="search-reslut" v-for="item of articleList" :key="item.id">
                                        <a @click="goTo(item.id)" v-html="item.articleTitle" style="text-decoration: none;border-bottom: 1px solid white;"></a>
                                        <p class="search-reslut-content text-justify" v-html="item.articleContent"></p>
                                    </li>
                                </ul>
                                <div v-show="flag && articleList.length == 0" style="font-size:0.875rem">
                                    找不到您查询的内容：{{ keywords }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--====== Search From ======-->
        <!--====== Start Header ======-->
        <header class="header-area transparent-header">
            <!--=== Header Navigation ===-->
            <div class="header-navigation navigation-two navigation-white">
                <div class="nav-overlay"></div>
                <div class="container-fluid">
                    <!--=== Primary Menu ===-->
                    <div class="primary-menu">
                        <!--=== Site Branding ===-->
                        <div class="site-branding">
                            <a th:href="@{/index1}" class="brand-logo"><img th:src="@{/picture/logo-white.png}" alt="Site Logo"></a>
                        </div>
                        <!--=== Nav Inner Menu ===-->
                        <div class="nav-menu">
                            <!--=== Mobile Logo ===-->
                            <div class="mobile-logo mb-30 d-block d-xl-none text-center">
                                <a th:href="@{/index1}" class="brand-logo"><img th:src="@{/picture/logo-black.png}" alt="Site Logo"></a>
                            </div>
                            <!--=== Nav Search ===-->
                            <!--                            <div class="nav-search mb-30 d-block d-xl-none ">-->
                            <!--                                <form>-->
                            <!--                                    <div class="form_group">-->
                            <!--                                        <input type="email" class="form_control" placeholder="Search Here" name="email" required="">-->
                            <!--                                        <button class="search-btn"><i class="fas fa-search"></i></button>-->
                            <!--                                    </div>-->
                            <!--                                </form>-->
                            <!--                            </div>-->
                            <!--=== Main Menu ===-->
                            <nav class="main-menu">
                                <ul>
                                    <li class="menu-item "><a th:href="@{/}">首页</a></li>
                                    <li class="menu-item has-children"><a >竞赛</a>
                                        <ul class="sub-menu">
                                            <li><a th:href="@{/front/news_list}">竞赛新闻</a></li>
                                            <li><a th:href="@{/front/notices_list}">竞赛通知</a></li>
                                            <li><a th:href="@{/front/answers_list}">竞赛题解</a></li>
                                            <li><a th:href="@{/front/gallerys_list}">竞赛现场</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item "><a th:href="@{/front/peoples_list}">名人堂</a>
                                    </li>
                                    <li class="menu-item "><a th:href="@{/about}">竞赛报名</a>
                                    </li>
                                    <li class="menu-item"><a th:href="@{http://acm.zut.edu.cn/}">竞赛转播</a></li>
                                    <li class="menu-item"><a th:href="@{/contact}">加入我们</a></li>
                                    <li class="menu-item"><a class="search-btn" th:href="@{/}" data-bs-toggle="modal" data-bs-target="#search-modal"><i class="far fa-search"></i></a></li>
                                </ul>
                            </nav>
                            <!--=== Nav Button ===-->
                            <!--                            <div class="menu-button mt-40 d-xl-none">-->
                            <!--                                <a th:href="@{/contact}" class="main-btn btn-green">Book now<i class="far fa-angle-double-right"></i></a>-->
                            <!--                            </div>-->
                        </div>
                        <!--=== Nav right Item ===-->
                        <div class="nav-right-item d-flex align-items-center">
                            <!--                            <div class="menu-button d-xl-block d-none">-->
                            <!--                                <a th:href="@{/contact}" class="main-btn btn-green">Book now<i class="far fa-angle-double-right"></i></a>-->
                            <!--                            </div>-->
                            <li class="menu-item" style="list-style: none;margin-top: 10px">
                                <a class="search-btn" style="color: #fff;font-size: 30px;display: none;" th:href="@{/}" data-bs-toggle="modal" data-bs-target="#search-modal">
                                    <i class="far fa-search"></i>
                                </a>
                            </li>
                            <div class="navbar-toggler">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header><!--====== End Header ======-->
        <!--====== Start Breadcrumb Section ======-->
        <section class="page-banner light-red-bg pt-170 pb-250 bg_cover" th:style="'background-image: url(' + @{../image/page-bg-1.jpg} + ');'">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <div class="page-banner-content text-center text-white">
                            <h1 class="page-title">名人堂</h1>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Breadcrumb Section ======-->

        <!--====== Start Accommodation Section ======-->
        <section class="accommodation-section pt-100 pb-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-6 col-sm-12" th:each="item:${pageInfo.list}">
                        <div class="single-service-item mb-30 wow fadeInUp">
                            <div class="img-holder">
                                <img th:src="${item.getArticleCover()}"  alt="Service image">
                                <div class="shape"></div>
                            </div>
                            <div class="text">
                                <h3 class="title"><a th:text="${item.getArticleTitle()}"></a></h3>
                                <p  th:text="${#temporals.format(item.getCreateTime(), 'yyyy年MM月dd日 HH:mm:ss')}"></p>
                                <div class="meta">
                                    <a th:href="@{/blogs/}+${item.getId()}" class="icon-btn"><i class="far fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--分页-->
                <!--        分页-->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="vedhak-pagination text-center mt-30 wow fadeInUp pagination">
                            <ul>
                                <li><a th:href="@{/front/peoples_list(pageNum=1,pageSize=6)}">首页</a></li>

                                <li th:classappend="${!pageInfo.hasPreviousPage} ? 'disabled'">
                                    <a th:href="@{${!pageInfo.hasPreviousPage} ? 'javascript:void(0)': '/front/peoples_list?pageNum='+( ${pageInfo.pageNum}-1 )+'&pageSize=6'}"><i class="fas fa-angle-left"></i></a>
                                </li>


                                <ul>
                                    <!-- 如果页码小于等于6，正常显示 -->
                                    <li th:if="${pageInfo.pages <= 6}" th:each="i : ${#numbers.sequence(1, pageInfo.pages)}">
                                        <a th:href="@{/front/peoples_list(pageNum=${i}, pageSize=6)}" th:text="${i}"></a>
                                    </li>

                                    <!-- 如果页码大于6，只显示前3页和后2页 -->
                                    <li th:if="${pageInfo.pages > 6}">
                                        <!-- 前三页 -->
                                        <span th:each="i : ${#numbers.sequence(1, 3)}">
                                            <a th:href="@{/front/peoples_list(pageNum=${i}, pageSize=6)}" th:text="${i}"></a>
                                        </span>

                                        <!-- 省略号 -->
                                        <span>.....</span>

                                        <!-- 后两页 -->
                                        <span th:each="i : ${#numbers.sequence(pageInfo.pages - 1, pageInfo.pages)}">
                                            <a th:href="@{/front/peoples_list(pageNum=${i}, pageSize=6)}" th:text="${i}"></a>
                                        </span>
                                    </li>
                                </ul>

                                <li th:classappend="${!pageInfo.hasNextPage} ? 'disabled'">
                                    <a th:href="@{${!pageInfo.hasNextPage} ? 'javascript:void(0)': '/front/peoples_list?pageNum='+( ${pageInfo.pageNum}+1 )+'&pageSize=6'}"><i class="fas fa-angle-right"></i></a>
                                </li>

                                <li><a th:href="@{'/front/peoples_list?pageNum='+${pageInfo.pages}+ '&pageSize=' + 6}">尾页</a></li>

                                <li>共[[${pageInfo.total}]]条</li>
                                <li>当前第[[${pageInfo.pageNum}]]/[[${pageInfo.pages}]]页</li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section><!--====== End Accommodation Section ======-->

        <!--====== Back To Top  ======-->
        <a href="#" class="back-to-top"><i class="far fa-angle-up"></i></a>
        <!--====== Jquery js ======-->
        <script data-cfasync="false" th:src="@{/js/email-decode.min.js}"></script><script th:src="@{/js/jquery-3.6.0.min.js}"></script>
        <!--====== Bootstrap js ======-->
        <script th:src="@{/js/popper.min.js}"></script>
        <!--====== Bootstrap js ======-->
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <!--====== Slick js ======-->
        <script th:src="@{/js/slick.min.js}"></script>
        <!--====== Magnific js ======-->
        <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
        <!--====== Isotope js ======-->
        <script th:src="@{/js/isotope.min.js}"></script>
        <!--====== Imagesloaded js ======-->
        <script th:src="@{/js/imagesloaded.min.js}"></script>
        <!--====== Counterup js ======-->
        <script th:src="@{/js/jquery.counterup.min.js}"></script>
        <!--====== Waypoints js ======-->
        <script th:src="@{/js/jquery.waypoints.js}"></script>
        <!--====== Nice-select js ======-->
        <script th:src="@{/js/jquery.nice-select.min.js}"></script>
        <!--====== jquery UI js ======-->
        <script th:src="@{/js/jquery-ui.min.js}"></script>
        <!--====== WOW js ======-->
        <script th:src="@{/js/wow.min.js}"></script>
        <!--====== Main js ======-->
        <script th:src="@{/js/theme.js}"></script>
        <script>
            new Vue({
                el: "#app",
                data: function() {
                    return {
                        keywords: "",
                        articleList: [],
                        flag: false,
                        searchFlag: false
                    };
                },
                methods: {
                    goTo(articleId) {
                        this.searchFlag = false;
                        window.location.href = "/blogs/" + articleId;
                    }
                },
                watch: {
                    keywords(value) {
                        this.flag = value.trim() != "" ? true : false;
                        axios
                            .get("/articles/search", {
                                params: { current: 1, keywords: value }
                            })
                            .then(({ data }) => {
                                this.articleList = data.data;
                            });
                    }
                }
            });
        </script>
    </body>
</html>